<template>
  <el-form
    ref="ruleForm"
    :rules="rules"
    :model="temp"
    label-position="right"
    label-width="35%"
    style="width: 400px margin:auto"
    size="small"
  >
    <el-form-item :label="$t('location.timeSlot')+' :'">
      <el-time-select
        v-model="startTime"
        placeholder="起始时间"
        :picker-options="{
          start: '00:00',
          step: '01:00',
          end: '24:00',
        }"
        @change="choosetime"
      ></el-time-select>
      <el-time-select
        v-model="endTime"
        placeholder="结束时间"
        :picker-options="{
          start: '00:00',
          step: '01:00',
          end: '24:00',
          minTime: startTime
        }"
        @change="choosetime"
      ></el-time-select>
      <i class="el-icon-minus" @click="reduceDateTimeCount"></i>
    </el-form-item>
    <el-form-item :label="$t('location.timeSlotCharge')+' :'" prop="chargeValue">
      <el-input-number v-model="temp.chargeValue" :min="0" @change="choosetime"></el-input-number>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "TimeSelect",
  props: {
    start: {
      type: String,
      default: ""
    },
    end: {
      type: String,
      default: ""
    },
    value: {
      type: String | Number,
      default: undefined
    },
    idx: {
      type: Number,
      default: 0
    }
  },
  // props: ["start", "end", "idx"],
  data() {
    const chargeValue = (rule, value, callback) => {
      if (value || value === 0) {
        if (value > 0 && value < 100) {
          callback();
        } else {
          callback(new Error("收费标准大于0小于100！"));
        }
      } else {
        callback();
      }
    };
    return {
      startTime: "",
      endTime: "",
      temp: {
        chargeValue: undefined
      },
      rules: {
        chargeValue: [{ trigger: "blur", validator: chargeValue }]
      }
    };
  },
  watch: {
    start: {
      handler: function(val, oldval) {
        this.startTime = this.start;
      },
      deep: true,
      immediately: true
    },
    end: {
      handler: function(val, oldval) {
        this.endTime = this.end;
      },
      deep: true,
      immediately: true
    },
    value: {
      handler: function(val, oldval) {
        this.temp.chargeValue = this.value;
      },
      deep: true,
      immediately: true
    }
  },
  mounted() {
    this.startTime = this.start;
    this.endTime = this.end;
  },
  methods: {
    choosetime() {
      this.$emit(
        "getTempTime",
        this.startTime ? this.startTime : "",
        this.endTime ? this.endTime : "",
        this.temp.chargeValue ? this.temp.chargeValue : "",
        this.idx
      );
    },
    reduceDateTimeCount() {
      this.$emit(
        "reduceCount",
        this.startTime ? this.startTime : "",
        this.endTime ? this.endTime : "",
        this.temp.chargeValue ? this.temp.chargeValue : "",
        this.idx
      );
    },
    // 校验数据
    validateForm() {
      let flag = null;
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          flag = true;
        } else {
          flag = false;
        }
      });
      return flag;
    }
  }
};
</script>

